<template>
  <div class="vin-log-configuration-page">
    <!-- 查询 -->
    <div style="padding:10px;margin: 6px 10px 0;">
      <el-form :model="queryData" class="demo-form-inline" inline >
        <el-form-item>
          <el-input v-model="queryData.vinId" placeholder="请输入vin号" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryFn()" @keyup.enter.native="queryFn()">查询
          </el-button>
          <el-button icon="el-icon-search" type="primary" @click="openIncreaseCarDialog()" @keyup.enter.native="openIncreaseCarDialog()">添加新车辆
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 查询结果 -->
     <div class="result-box" v-if="resultFlag">
      <el-descriptions title="查询结果"  border :column="2">
      <el-descriptions-item label="vin">{{ result.vin }}</el-descriptions-item>
      <el-descriptions-item label="项目">{{ result.projectName }}</el-descriptions-item>
      <el-descriptions-item label="平台">{{ result.platform }}</el-descriptions-item>
      <el-descriptions-item label="virtual_vin">{{ result.virtualVin }}</el-descriptions-item>
      <el-descriptions-item label="vehicle_id">{{ result.vehicleId }}</el-descriptions-item>
      <el-descriptions-item label="车辆配置">{{ result.carConfig }}</el-descriptions-item>
      <el-descriptions-item label="车辆类型">{{ formatVehicleUseType(result.vehicleUseType) }}</el-descriptions-item>
      <el-descriptions-item label="备注">{{ result.remark }}</el-descriptions-item>
      <el-descriptions-item label="操作">
        <span class="operation-text" @click="updateFn()">修改</span>
      </el-descriptions-item>
    </el-descriptions>
     </div>
     <div class="result-box" v-else>
      <p>未查询到车辆！</p>
     </div>
     <!-- 添加车辆弹窗 -->
    <IncreaseCarDialog ref="increaseCarDialogRef" @feedbackFn="feedbackFn"/>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { searchByVin } from '@/api/carConfigurationApi.js';
import IncreaseCarDialog from './components/IncreaseCarDialog.vue'
import { ElMessage } from 'element-plus';

const increaseCarDialogRef = ref(null)
const queryData = reactive({
  vinId: ''
})
let result = ref({})
let resultFlag = ref(false)

const formatVehicleUseType =(val) => {
  switch(val){
    case 0:
      return '量产车'
        case 1:
      return '研发车'
        case 2:
      return '台架'
      default: 
        return 
  }
}
const queryFn = () => {
  searchCarInfo()
};
// 增加车辆按钮
const openIncreaseCarDialog = () => {
  increaseCarDialogRef.value.switchVisible(true, null)
}
// 修改完成后重调获取列表接口
const feedbackFn = () => {
    searchCarInfo();
}
// 查询车辆接口
const searchCarInfo = () => {
  searchByVin({vin:queryData.vinId}).then(res => {
    if (res.data.code === 200) {
      if(res.data.data !== null){
        resultFlag.value = true
        result.value = res.data.data
      }else {
        resultFlag.value = false
      }
    }
    
  }).catch(err => {
    ElMessage.error(err.msg)
  })
};
const updateFn = () => {
  increaseCarDialogRef.value.switchVisible(true, result.value)
}
</script>

<style lang="less" scoped>
  .content {
    padding: 0 20px;
  }
  .result-box{
    padding: 20px;
    .operation-text{
      color: #409EFF;
      &:hover{
        cursor: pointer;
      }
    }
  }
</style>